<template>
  <page-header-wrapper>
    <page-tab-list> </page-tab-list>
    <a-card :border="false">
      <a-form-model :model="formData" :rules="rules" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }" ref="form">
        <div style="width: 600px">
          <div class="title" style="padding-top: 0">chartGPT配置</div>

          <a-form-model-item label="Key" prop="key">
            <a-input allowClear placeholder="key" v-model="formData.key"></a-input>
          </a-form-model-item>
        </div>

        <div style="width: 600px">
          <div class="title" style="padding-top: 0">积分使用规则</div>

          <a-form-model-item label="单次消耗积分" prop="q_integral">
            <a-input allowClear placeholder="单次消耗积分" addon-after="积分" v-model="formData.q_integral"></a-input>
          </a-form-model-item>
        </div>

        <div class="border-b"></div>

        <div style="width: 600px">
          <div class="title">规则说明</div>
          <a-form-model-item label="规则说明内容" prop="rule">
            <a-textarea allowClear placeholder="规则说明内容" v-model="formData.rule"></a-textarea>
          </a-form-model-item>
        </div>
        <div class="border-b"></div>
      </a-form-model>
      <div style="margin-top: 50px">
        <a-button @click="submit" :loading="confirmLoading" type="primary">保存</a-button>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import ChartGptApi from '@/api/chartGpt'
export default {
  data() {
    return {
      confirmLoading: false,
      formData: {
        q_integral: 0,
        rule: '',
        key: '',
      },
      rules: {
        key: [
          {
            required: true,
            message: 'chartGpt唯一Key不能为空',
            trigger: ['blur', 'change'],
          },
        ],
        q_integral: [
          {
            required: true,
            message: '单次消耗积分不能为空',
            trigger: ['blur', 'change'],
          },
        ],
        rule: [
          {
            required: true,
            message: '规则不能为空',
            trigger: ['blur', 'change'],
          },
        ],
      },
    }
  },
  created() {
    this.getSetting()
  },
  methods: {
    async getSetting() {
      const res = await ChartGptApi.setting({}, 'GET')
      this.formData = res.data.model
    },
    async submit() {
      this.confirmLoading = true
      try {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const res = await ChartGptApi.setting(this.formData, 'POST')
            this.visible = false
            this.getSetting()
            this.$message.success('保存成功')
          }
          this.confirmLoading = false
        })
      } catch (error) {
        this.confirmLoading = false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.title {
  padding: 30px 0;
  padding-left: 10px;
  font-weight: 600;
  font-size: 18px;
}

.border-b {
  border-bottom: 1px solid #f5f5f5;
}
</style>
